<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>待办清单</title>
    <style>
        body { max-width: 400px; 
            margin: 20px auto; 
            font-family: sans-serif; 
        }
        #input { width: 300px;
             padding: 5px;
             }
        #add { padding: 5px 10px;
             background: #007bff;
              color: white;
               border: none;
             }
        #list { list-style: none;
             padding: 0; 
            }
        #list li { padding: 8px; 
            margin: 5px 0; 
            background: #f0f0f0;
             display: flex; 
             justify-content: space-between;
             }
        #list li.done { text-decoration: line-through; 
            color: #666; 
        }
        .del { background: #dc3545; 
            color: white; 
            border: none; 
            padding: 2px 6px; 
        }
    </style>
</head>
<body>
    <h3>待办清单</h3>
    <input type="text" id="input" placeholder="输入任务">
    <button id="add">添加</button>
    <ul id="list"></ul>

    <script>
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        const input = document.getElementById('input');
        const addBtn = document.getElementById('add');
        const list = document.getElementById('list');

        showTasks();

        addBtn.onclick = () => {
            const text = input.value.trim();
            if (text) {
                tasks.push({text, done: false});
                saveAndShow();
                input.value = '';
            }
        };

        input.onkeypress = (e) => {
            if (e.key === 'Enter') addBtn.click();
        };

        function showTasks() {
            list.innerHTML = '';
            tasks.forEach((task, i) => {
                const li = document.createElement('li');
                li.className = task.done ? 'done' : '';
                li.innerHTML = `
                    <span onclick="toggle(${i})">${task.text}</span>
                    <button class="del" onclick="del(${i})">删除</button>
                `;
                list.appendChild(li);
            });
        }

        function toggle(i) {
            tasks[i].done = !tasks[i].done;
            saveAndShow();
        }

        function del(i) {
            tasks.splice(i, 1);
            saveAndShow();
        }

        function saveAndShow() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
            showTasks();
        }
    </script>
</body>
</html>